<template>
    <div class="container" v-if="city">
        <div class="title" v-if="isstored">你正在预览{{ city}}的天气信息</div>
        <div class="title" v-else>你正在预览{{ city }}的天气信息,可以通过右上角的"+"按钮保存起来</div>
        <div>当日气温是: <span>{{temperature}}摄氏度</span></div>
        <div>当日天气是: <span>{{weather}}</span></div>
        <div>当日风向是: <span>{{winddirection}}风</span></div>
        <div>当日风力是: <span>{{windpower}}级</span></div>
    </div>
    
    <BottomChartTemp />
</template>

<script setup>
import BottomChartTemp from '@/components/BottomChartTemp.vue';
import { ref, onMounted } from 'vue';
import { getCurrentWeather, getForecastWeather } from '@/api/index.js';
import { useRoute } from 'vue-router';
const route = useRoute();

// 初始化天气数据
const city = ref('');
const temperature = ref('');
const weather = ref('');
const winddirection = ref('');
const windpower = ref('');

// 判断本地存储中是否有该城市
const isstored = ref('');
const judge = () => {
    const cityList = JSON.parse(localStorage.getItem('cityList')) || []
    const storedCity = cityList.find((city) => city.adcode === route.params.adcode)
    if (storedCity) {
        isstored.value = true
    } else { 
        isstored.value = false
    }
}



const handleDelete = (adcode) => { 
  const cityList = JSON.parse(localStorage.getItem('cityList')) || []
  const updatedList = cityList.filter((city) => city.adcode !== adcode)
  localStorage.setItem('cityList', JSON.stringify(updatedList))
}

onMounted(async () => {
    // 获取当前城市天气数据
    const { lives } = await getCurrentWeather(route.params.adcode);
    city.value = lives[0].city;
    temperature.value = lives[0].temperature;
    weather.value = lives[0].weather;
    winddirection.value = lives[0].winddirection;
    windpower.value = lives[0].windpower;

    // 挂载时判断是否有该城市的天气数据
    judge()

})

</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #fff;
    &:nth-child(2) {
        margin-top: 60px;
    };
    .title {
        position: absolute;
        left:0;
        top:80px;
        height: 40px;
        width: 100%;
        line-height: 40px;
        background-color: #004e71;
        text-align: center;
    }
}
</style>